<template>
    <el-tabs v-model="currentTermID" :class="{ 'mld-terminal-tabs': true }" @tab-click="handleTabClick">
        <el-tab-pane :name="term.id" v-for="term in terms" :key="term.id">
            <template #label>
                <el-popover placement="bottom-start" :width="200" trigger="hover" :show-after="500">
                    <template #reference>
                        <span class="term-label">
                            <div :class="{
                                'status-indicator': true,
                                'term-open': !term.closed,
                                'term-closed': term.closed,
                            }"></div>
                            <span style="margin-left: 6px">{{ term.name }}</span>
                        </span>
                    </template>
                    Status: {{ term.closed ? "Stopped" : "Running" }}
                    <!-- <icon-button v-if="term.closed" @click="onRestartRequest(term.id)" icon="run" text="Restart"></icon-button>
            <icon-button v-else @click="onCloseRequest(term.id)" icon="stop" text="Soft stop"></icon-button> -->
                    <!-- <el-button v-if="term.closed">Restart</el-button> -->
                    <!-- <el-button v-else >Stop</el-button> -->
                </el-popover>
            </template>
            <terminal-view :api="api" :termID="term.id" :ref="term.id"></terminal-view>
        </el-tab-pane>
    </el-tabs>
</template>

<script lang="ts">
import TerminalView from "./RealtimeTerminal.vue";
import { PtyAPI } from "./api";
import { ElNotification, TabsPaneContext, ElTabPane, ElTabs, ElPopover } from "element-plus";
import { defineComponent } from "vue";
import { TerminalType } from "./models";
import { getSystemTerminal } from "./terminal_utils";


export default defineComponent({
    components: { TerminalView, ElTabPane, ElTabs, ElPopover },
    props: {
        componentName: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            currentTermID: "",
            terms: [] as TerminalType[],
            api: new PtyAPI(this.componentName)
        };
    },
    methods: {
        handleTabClick(tab: TabsPaneContext) {
            console.log(tab);
        },
        sendCommand(termID: string, terminal: string) {
            const terminalVue = (this.$refs[termID] as any)[0];
            console.log("terminal", terminalVue);
            (terminalVue as any).injectCMD(terminal);
        },
        findIdleTermTab() {
            return this.terms.find((term) => term.closed);
        },
        onCloseRequest(termID: string) {
            this.api.closePTY(termID);
        },
        // 处理终端重启请求
        // 在后端重新创建一个终端实例，前端的终端组件可能销毁，ID 会被更新为重启后的终端实例的 ID。
        onRestartRequest(termID: string) {
            const currentTerm = this.terms.find((term) => term.id == termID);
            if (currentTerm == null) {
                throw Error("Current term was null");
            }
            this.api.createPTY(currentTerm.command, currentTerm.name).then(
                (newPTY: TerminalType) => {
                    currentTerm.closed = newPTY.closed;
                    currentTerm.id = newPTY.id;
                    this.currentTermID = newPTY.id;
                }
            );
        },
    },
    beforeMount() {
        // 获取所有的终端实例，并显示第一个；
        // 如果没有，则创建一个终端实例。
        // 将第一个 PTY 实例的 ID 设置为当前选中的标签页（currentTermID）。
        // 同时，将所有获取到的 PTY 实例赋值给 terms 数组。
        this.api = new PtyAPI(this.componentName)
        this.api.allActivePTYs().then((ptys: TerminalType[]) => {
            console.log("ptys", ptys);
            if (ptys.length == 0) {
                this.api.createPTY(getSystemTerminal(), "Terminal")
                    .then((terminal: TerminalType) => {
                        console.log("created pty:", terminal.id, terminal);
                        ElNotification.success("PTY connection success!");
                        this.terms = [terminal];
                        this.currentTermID = terminal.id;
                    })
                    .catch(() => {
                        ElNotification.error("Error when creating PTY!");
                    });
            } else {
                this.currentTermID = ptys[0].id;
                this.terms = ptys;
            }
        });

        // registerOnRunCommandRequest(({ cmd, termName }) => {
        //     if (termName == null || termName == "") {
        //         ElNotification.error(`Terminal name undefined for command ${cmd}!`);
        //         return;
        //     }
        //     createPTY(
        //         formatTerminalCommand(generateChdirCommand((store.state as any).controls.cwd) + ` &&` + cmd),
        //         termName
        //     )
        //         .then((terminal: TerminalType) => {
        //             console.log("created pty:", terminal.id, terminal);
        //             ElNotification.success("PTY connection success!");
        //             const idleTerm = this.findIdleTermTab();
        //             if (idleTerm == null) {
        //                 this.terms.push(terminal);
        //             } else {
        //                 idleTerm.id = terminal.id;
        //                 idleTerm.name = termName;
        //                 idleTerm.closed = false;
        //             }
        //             this.currentTermID = terminal.id;
        //         })
        //         .catch(() => {
        //             ElNotification.error("Error when creating PTY!");
        //         });
        // });
        // TODO: ACTIVATE HERE
        // addOnMessageHandler(
        //     "pty-status-change",
        //     (msg: { output: string; termID: string }) => {
        //         const term = this.terms.find((term) => term.id == msg.termID);
        //         if (term != null) {
        //             term.closed = true;
        //         }
        //     }
        // );
    },
});
</script>

<style scoped>
.mld-terminal-tabs .el-tabs__header {
    margin: 0 0;
}

.term-label {
    display: flex;
    align-items: center;
}

.status-indicator {
    height: 12px;
    width: 12px;
    border-radius: 6px;
    display: inline-block;
}

.term-open {
    background-color: #11cb25;
}

.term-closed {
    background-color: #ce2a2a;
}
</style>